<template>
	<view class="main">
		<!-- 顶部标题部分 -->
		<u-row>
			<u-col span="4" class="title" :offset="0">
				消息
			</u-col>
		</u-row>
		<!-- 通知部分 -->
		<u-notice-bar mode="horizontal" :is-circular="false" :list="list" duration="4000"
			border-radius="20"></u-notice-bar>
		<!-- 客服框部分 -->
		<u-row class="message-cell" @click="toDetails(0)">
			<u-col span="2">
				<u-avatar src="" size="100"></u-avatar>
			</u-col>
			<u-col span="8" class="name-content">
				<u-row>
					<u-col class="name">
						客服
					</u-col>
				</u-row>
				<u-row v-for="item,index in customer" :key="item.time">
					<u-col class="content" v-if="index == customer.length-1">
						{{item.text}}
					</u-col>
				</u-row>
			</u-col>
			<u-col span="2" class="time" v-for="item,index in customer" :key="item.time">
				<text v-if="index == customer.length-1">{{item.time}}</text>
			</u-col>
		</u-row>
		<!-- 其他人部分 -->
		<u-row v-for="item in messages" :key="item.chat_id" class="message-cell" @click="toDetails(item)">
			<u-col span="2" style="position: relative;">
				<!-- <u-badge type="error" :count="1" :offset="[-20,580]"></u-badge> -->
				<u-avatar :src="item.user2.avatar" size="100"></u-avatar>
			</u-col>
			<u-col span="8" class="name-content">
				<u-row>
					<u-col class="name">
						{{item.user2.nickname}}
					</u-col>
				</u-row>
				<u-row>
					<u-col class="content" >
						{{item.content}}
					</u-col>
				</u-row>
			</u-col>
			<u-col span="2" class="time">
				<text >{{item.create_time.slice(5,10)}}</text>
			</u-col>
		</u-row>
	</view>
</template>

<script setup>
	import {
		reactive,ref,onMounted
	} from 'vue';
	import { getAllChatWindow } from '../../api/chat.js'
	// 提示消息
	const notice = reactive('魅我提倡绿色健康交友，请谨慎发言')
	const list = reactive([
		'魅我提倡绿色健康交友，请谨慎发言',
		'魅我提倡绿色健康交友，请谨慎发言',
		'魅我提倡绿色健康交友，请谨慎发言',
		'魅我提倡绿色健康交友，请谨慎发言'
	])
	//客服聊天信息
	const customer = reactive([{

			text: '请输入你想咨询的问题',
			time: '星期一'
		},
		{

			text: '请输入你想咨询的问题',
			time: '星期二'
		},
		{

			text: '请输入你想咨询的问题',
			time: '星期三'
		}
	])
	//其他人聊天信息
	const messages = ref([])
	//点击去对话详情
	const toDetails = (obj) =>{
		uni.navigateTo({
			url:`/pages/messageDetail/messageDetail?user2_=${obj.user2_id}`,
			 events: {
			    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
			    acceptDataFromOpenedPage: function(data) {
			      // console.log(data)
			    },
			    someEvent: function(data) {
			      // console.log(data)
			    }
			  },
			  success: function(res) {
			      // 通过eventChannel向被打开页面传送数据
			      res.eventChannel.emit('acceptDataFromOpenerPage', obj)
			    }
			 
		})
	}
	onMounted(async() => {
		const result = await getAllChatWindow({
			user1_id:uni.getStorageSync('userInfo').user_id
		})
		messages.value = result.data
	})
</script>

<style lang="scss" scoped>
	.main {
		display: flex;
		flex-direction: column;
		padding: 0 20rpx;

		//顶部标题部分
		.title {
			height: 80rpx;
			font-size: 50rpx;
			font-weight: 500;
			line-height: 80rpx;
			margin-bottom: 20rpx;
		}

		//聊天框部分
		.message-cell {
			margin: 20rpx 0;
		}

		.message-cell:hover {
			background-color: rgba(0, 0, 0, .1);
		}

		.name-content {
			line-height: 50rpx;
			font-size: 30rpx;

			.name {
				letter-spacing: 10rpx;
			}

			.content {
				color: darkgray;
				white-space: nowrap;
			}
		}

		.time {
			line-height: 50rpx;
		}
	}
</style>